<template>
  <div class="ui-panel">
    <view class="panel-header">
      <text class="panel-title">相关课程</text>
    </view>
    <div class="panel-content is-full">
      <uiGrid :columnNum="2" :gutter="30" class="relession-swipe-item--container">
        <uiGridItem boxClass="relession-lession--container" v-for="item in list" :key="item.id">
          <template v-slot:content>
            <lessionItem
              :lessonName="item.lessonName"
              :lessonPicPath="item.lessonPic"
              :pliushTime="item.createTime"
              :lessonPrice="item.lessonPrice"
              :isVipLesson="item.isVipLesson"
              :lessonCheapPrice="item.lessonCheapPrice"
              :clickNum="item.clickNum"
            ></lessionItem>
          </template>
        </uiGridItem>
      </uiGrid>
    </div>
  </div>
</template>

<script>
import { getRecommendLesson } from "api/order/lession.js";
import uiGrid from "@/components/base/grid/index.vue";
import uiGridItem from "@/components/base/grid-item/index.vue";
import lessionItem from "@/components/business/lession/lession.vue";
export default {
  name: "LessonRecommend",
  props: {
    lessonId: [String, Number]
  },
  components: {
    uiGrid,
    uiGridItem,
    lessionItem
  },
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageNumber: 6,
        totalNumber: 0,
        totalPage: 1
      }
    };
  },
  created() {
    this.loadRecommended();
  },
  mounted() {},
  methods: {
    // 加载推荐的课程
    loadRecommended() {
      var params = {
        lessonId: this.lessonId
      };
      var self = this;
      getRecommendLesson(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        self.list = result && result.slice(0, 4);
      });
    }
  }
};
</script>
<style lang="scss">
.newClass {
  padding: 0 30rpx 0.533rem 30px;
  width: 100%;
  background-color: #fff;
  margin-top: 16rpx;
  box-sizing: border-box;
  .classType {
    color: #2c2c35;
    font-size: 34px;
    padding: 32px 0;
  }
  .classList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .class-item {
      flex: 0 0 50%;
      overflow: hidden;
      .class-item-img {
        width: 330px;
        height: 200px;
        background-color: #5c20c4;
        border-radius: 8px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .class-desc {
        width: 100%;
        box-sizing: border-box;
        color: #2c2c35;
        margin: 0.173rem 0;
        font-size: 0.373rem;
      }
      .renshu {
        width: 100%;
        box-sizing: border-box;

        .time {
          margin-right: 40px;
        }
        span {
          color: #aeafc0;
          font-size: 0.293rem;
          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
      .class-count {
        margin-top: 0.253333rem;
        margin-bottom: 0.48rem;
        color: #f54305;
        font-size: 0.4rem;
      }
    }
  }
  .lookMore {
    width: 100%;
    // height: 0.693rem;
    border-radius: 0.107rem;
    color: #aeafc0;
    font-size: 0.293rem;
    border: solid 0.027rem #cacddf;
    display: flex;
    justify-content: space-between;
    span {
      margin: 0.213rem 0;
      display: inline-block;
      width: 50%;
      text-align: center;
    }
    .lookMoreTip {
      border-left: solid 0.027rem #cacddf;
      img {
        width: 0.267rem;
        height: 0.267rem;
        margin-top: 0.01rem;
        margin-right: 8px;
      }
    }
  }
}
</style>
